<template>
  <div id="div2">
    <img src="../../assets/img7.jpg" id="pic">
    <div id="div1">
      <button @click="center" class="personnelcenter">个人中心</button>
      <h1 id="title">欢迎来到我们真菜</h1>
      <p class="word1">搜索:</p>
      <div class="look">
        <form label="订单编号" label-width="160px" name="f">
          <input type="text" id="num" class="t1"
                 v-model="selectVal"
                 placeholder="搜索你想要的蔬菜">
                <input type="button"  class="b2"  value="查看" @click="getGoodsInfo">
        </form>
      </div>

      <div id="card">
        <section id="team">
          <div class="page-1" >
            <div class="container">
                <div v-if="goodsData[0].seasonal === '是'" class="box1">
                    <div class="top-bar"></div>
                    <div class="nav">
                        <i class="verify fas fa-check-circle"></i>
                    </div>
                    <div class="details">
                      <img :src="'data:image/png;base64,'+goodsData[0].imgurl">
                        <strong>{{goodsData[0].name}}</strong>
                        <p>{{ goodsData[0].price }}</p>
                    </div>
                    <div class="btn">
                        <a  @click="openDetail(goodsData[0])" ><i class="fas fa-clipboard-list"></i>详情</a>
                        <a @click="getGoodsId(goodsData[0].id)"><i class="fas fa-eys" ></i>购买</a>
                    </div>
                </div>

              <div v-if="goodsData[0].seasonal === '否'" class="box">
                <div class="top-bar"></div>
                <div class="nav">
                  <i class="verify fas fa-check-circle"></i>
                </div>
                <div class="details">
                  <img :src="'data:image/png;base64,'+goodsData[0].imgurl">
                  <strong>{{goodsData[0].name}}</strong>
                  <p>{{ goodsData[0].price }}</p>
                </div>
                <div class="btn">
                  <a  @click="openDetail(goodsData[0])" ><i class="fas fa-clipboard-list"></i>详情</a>
                  <a @click="getGoodsId(goodsData[0].id)"><i class="fas fa-eys" ></i>购买</a>
                </div>
              </div>

                <div class="box1" v-if="goodsData.length>1 && goodsData[1].seasonal === '是'">
                    <div class="top-bar"></div>
                    <div class="nav">
                        <i class="verify fas fa-check-circle"></i>
                    </div>
                    <div class="details">
                        <img :src="'data:image/png;base64,'+goodsData[1].imgurl">
                        <strong>{{goodsData[1].name}}</strong>
                        <p>{{ goodsData[1].price }}</p>
                    </div>
                    <div class="btn">
                      <a  @click="openDetail(goodsData[1])" ><i class="fas fa-clipboard-list"></i>详情</a>
                      <a @click="getGoodsId(goodsData[1].id)"><i class="fas fa-eys" ></i>购买</a>
                    </div>
                </div>

              <div class="box" v-if="goodsData.length>1 && goodsData[1].seasonal === '否'" >
                <div class="top-bar"></div>
                <div class="nav">
                  <i class="verify fas fa-check-circle"></i>
                </div>
                <div class="details">
                  <img :src="'data:image/png;base64,'+goodsData[1].imgurl">
                  <strong>{{goodsData[1].name}}</strong>
                  <p>{{ goodsData[1].price }}</p>
                </div>
                <div class="btn">
                  <a  @click="openDetail(goodsData[1])" ><i class="fas fa-clipboard-list"></i>详情</a>
                  <a @click="getGoodsId(goodsData[1].id)"><i class="fas fa-eys" ></i>购买</a>
                </div>
              </div>

              <div class="box1" v-if="goodsData.length>2 && goodsData[2].seasonal === '是'">
                <div class="top-bar"></div>
                <div class="nav">
                  <i class="verify fas fa-check-circle"></i>
                </div>
                <div class="details">
                  <img :src="'data:image/png;base64,'+goodsData[2].imgurl">
                  <strong>{{goodsData[2].name}}</strong>
                  <p>{{ goodsData[2].price }}</p>
                </div>
                <div class="btn">
                  <a  @click="openDetail(goodsData[2])" ><i class="fas fa-clipboard-list"></i>详情</a>
                  <a @click="getGoodsId(goodsData[2].id)"><i class="fas fa-eys" ></i>购买</a>
                </div>
              </div>

                <div class="box" v-if="goodsData.length>2 && goodsData[2].seasonal === '否'">
                    <div class="top-bar"></div>
                    <div class="nav">
                        <i class="verify fas fa-check-circle"></i>
                    </div>
                    <div class="details">
                      <img :src="'data:image/png;base64,'+goodsData[2].imgurl">
                        <strong>{{goodsData[2].name}}</strong>
                        <p>{{ goodsData[2].price }}</p>
                    </div>
                    <div class="btn">
                      <a  @click="openDetail(goodsData[2])" ><i class="fas fa-clipboard-list"></i>详情</a>
                      <a @click="getGoodsId(goodsData[2].id)"><i class="fas fa-eys" ></i>购买</a>
                    </div>
                </div>
            </div>
          </div>
          <el-pagination @size-change="sizeChange" @current-change="currentChange"
      :current-page="page" :page-size="size" :page-sizes="pageSizes"
      layout="total, sizes, prev, pager, next, jumper" :total="total" class="fenye">
    </el-pagination>
        </section>
    </div>/

    <div class="outer_div">
    <el-dialog v-model="readimf" title="商品详情" :before-close="close1">
      <div v-if="detail.length > 0">
      <input type="button" value="上一张" v-show="index>=1" v-on:click="pre">
        <img :src="'data:image/png;base64,'+detail.imgs[index].img" width="30">
        <input type="button" value="下一张"  v-show="index<detail.imgs.length-1" v-on:click="post">
      </div>
          <div id="name">商品名称:{{ detail.name }}</div>
          <div id="price">价格:{{ detail.price }}</div>
        <p>商品详情</p>
        <!-- 可插入视频 -->
      <div v-html="detail.description"></div>
        <div style="width: 500px;height: 180px;margin: 10px 0px;">
        <iframe :src="path"></iframe>
        </div>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="close1">取消</el-button>
        <el-button type="primary"  @click="dialogFormVisible = true">购买</el-button>
      </span>
        </template>
      </el-dialog>
    </div>

      <el-dialog v-model="dialogFormVisible" title="购买" :before-close="close">
        <el-form :model="form" ref="buyForm" :rules="rules">
          <el-form-item label="用户姓名" label-width="140px" prop="user.name">
            <el-input v-model="form.user.name" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="电话号码" label-width="140px" prop="user.tele">
            <el-input v-model="form.user.tele" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="交易时间" label-width="140px" prop="tradeTime">
            <div class="block">
              <span class="demonstration"></span>
              <el-date-picker
                  value-format="YYYY-MM-DD HH:mm:ss"
                  v-model="form.tradeTime"
                  type="datetime"
                  placeholder="Select date and time"
                  :disabled-date="disabledDate"
              />
            </div>
          </el-form-item>
          <el-form-item label="交易地点" label-width="140px" prop="tradePlace">
            <el-input v-model="form.tradePlace" autocomplete="off"/>
          </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="buyGoods()" >购买</el-button>
      </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>

import {reactive, ref} from "vue";
import request from "@/utils/request";
import router from "@/router";


export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Home",
  data() {
    const validateName = (rule, value, callback) => {
      var reg= /^[\u4E00-\u9FA5]{2,4}$/;
      if (value === '') {
        callback(new Error('姓名不能为空'));
      }else if(!reg.test(value)){
        callback(new Error('请输入二到五位的中文字符'))
        this.$message.error("请输入二到五位的中文字符");}
      else {
        callback();
      }
    };
    const validateTele = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请填写电话号码'));
      } else if (!value.toString().match(new RegExp("^1[3-9]\\d{9}$"))) {
        callback(new Error('电话号码有误，请重新填写'));
        this.$message.error("电话号码有误，请重新填写");}
      else {
        callback();
      }
    };
    const validateDate = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('交易时间不能为空'));
      } else {
        callback();
      }
    };
    const validatePlace = (rule, value, callback) => {
      var reg=/^[0-9a-zA-Z\u4E00-\u9FA5_]{1,31}$/;
      if (value === '') {
        callback(new Error('交易地点不能为空'));
      }else if(!reg.test(value)){
        callback(new Error('交易地址输入不符合规范'))
        this.$message.error("交易地址输入不符合规范");
}
      else {
        callback();
      }
    };

    return {
      goodsId: '',
      detail: {},
      xxx: '<p data-we-empty-p="">143242</p>',
      user: {},
      goodsData:[
        {
          name: '',
          price: '',
          imgurl: '',
          imgs: []
        },
        {
          name: '',
          price: '',
          imgurl: '',
          imgs: []
        },
        {
          name: '',
          price: '',
          imgurl: '',
          imgs: []
        }
      ],
      index:0,
      page: 1, //第几页
      size: 3, //一页多少条
      total: 0, //总条目数
      pageSizes: [], //可选择的一页多少条
      name:"",
      selectVal:'',//搜索关键字
      page_index: ["page-1", "page-2", "page-3"],
      disabledDate(time) {
        return time.getTime() < Date.now() - 8.64e7;//禁止选择今天以前的时间
      },
      // flag: true,
      number:{
      user:{
        id:'12',
        }
      },
      order: {
      },
      loading: ref(false),
      currentDate: new Date().toDateString(),
      tableData: [],
      dialogFormVisible: ref(false),
      readimf: ref(false),
      form: {
        user: {
          name: '',
          tele: '',
        },
        tradeTime: '',
        tradePlace: '',
      },
      userinfo: {},
      tableDat: [],
      id: '',
      rules: reactive({
        user: {
          name: [
            {validator: validateName, trigger: 'blur'},
            {required: true,}
          ],
          tele: [
            {validator: validateTele, trigger: 'blur'},
            {required: true,}
          ],
        },
        tradeTime: [
          {validator: validateDate, trigger: 'blur'},
          {required: true,}
        ],
        tradePlace: [
          {validator: validatePlace, trigger: 'blur'},
          {required: true,}
        ],
      })
    }
  },
  created() {
    this.getGoodsInfo();
    this.getUser()
  },
  methods: {
    getUser() {
      request.get("http://localhost:8082/user/getUserInfo").then(res => {
        if (res.flag) {
          this.user = res.data
          this.form.tradePlace = res.data.defaultTraderPlace
          this.$message({
            type: 'success',
            message: res.msg
          })
        } else {
          this.$message.error(res.msg)
          this.account = ''
          this.password = ''
        }
      })
    },
    //下一张
    post:function(){
                    this.index++;
                },
                //上一张
    pre:function(){
                    this.index--;
                },
    //page改变时的回调函数，参数为当前页码
     currentChange(val) {
      console.log("翻页，当前为第几页", val);
      this.page = val;
      this.getGoodsInfo()
    },
    //size改变时回调的函数，参数为当前的size
    sizeChange(val) {
      console.log("改变每页多少条，当前一页多少条数据", val);
      this.size = val;
      this.page = 1;
      this.getGoodsInfo()
    },

    getGoodsInfo() {
      request.get("http://localhost:8082/goods/getGoodsList?pageNum="+this.page+"&pageSize="+this.size+"&searchQuery="+this.selectVal).then(res => {
        this.goodsData = res.data.data
        this.total = res.data.total
      })
    },
    getGoodsId(data) {
      this.dialogFormVisible = true
      this.goodsId = data
    },
    buyGoods() {
      this.form.goodsId = this.goodsId;
      this.$refs['buyForm'].validate((valid) => {
        if (valid) {
          request.post("http://localhost:8082/user/buy", this.form).then(res => {
            if (res.flag) {
              this.id = res.data;
              this.$message({
                type: 'success',
                message: res.msg
              });
              this.getid=true;
            } else {
              this.$message.error(res.msg);
            }
          }).finally(() => {
                this.dialogFormVisible = false;
                this.getGoodsInfo();
                this.form = {
                  user: {
                    name: '',
                    tele: '',
                  },
                  tradeTime: '',
                  tradePlace: '',
                }
              }
          )
        }
      })
    },
    center() {
      router.push({path: '/userCenter/userWelcome'});
    },
    close() {
      this.dialogFormVisible = false;

    },
    close1() {
      this.readimf = false;

    },
    openDetail(data){
      this.detail = data
      this.readimf = true;
    }
  }
}
</script>

<style scoped>
* body {
    background: url("../../assets/img7.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }


  #title {
    text-align: center;
  }

  .bottom {
    background-image: url(../../assets/button-bg.jpg);
    margin-top: 13px;
    margin-left: 170px;
    height: 19px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .button {
    padding: 0;
    min-height: auto;
  }

  .button1 {
    background-image: url(../../assets/button-bg.jpg);
    margin-top: 110px;
    margin-left: 100px;
    width: 110px;
    height: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }

  #div1 {
    position: absolute;
    left: 20%;
    right: 20%;
    top: 15%;
    bottom: 2%;
    border: 10px inset rgb(62, 69, 77);
    background: linear-gradient(to bottom right, #107cad, #0a96bc, #f6f6f6);
    box-shadow: 20px 20px 10px 3px #000; /*Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+*/
    -webkit-box-shadow: 10px 8px 10px 3px #000;
    -moz-box-shadow: 10px 8px 10px 3px #000;
    *background-clip: padding-box;
    opacity: 0.9; /*透明度*/
  }

  #pic {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }

  .pic1 {
    margin-left: 150px;
  }

  #name {
    margin-left: 100px;
    margin-top: 10px;
  }

  #price {
    margin-left: 100px;
    margin-top: 50px;
  }
  .look{
    position: relative;

  }
  .b2{
    position: absolute;
    background-image: url(../../assets/button-bg.jpg);
    left: 630px;
    top:0px;
    width: 40px;
    height: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .t1{
    position: absolute;
    left: 250px;
    top: 0px;
    height: 20px;
    width: 350px;
    font-size: 15px;
  }
  .div2{
    background-size: 100% ;
    float: left;
    margin-top: -200px;
  }

  .b3{
    margin-bottom: 20px;
  }
  .img3{
   height: 200px;
   width: 200px;
  }
  .word1{
   position: absolute;
   left: 200px;
    top: 100px;

  }
  .dialog1{
    z-index: 2;
  }
  #card #team{
    margin-top: 100px;
    width:100%;
    height:100vh;
    display:flex;
    /* justify-content:center;
    align-items: center; */
    flex-direction:column;
  }
  #card #team .heading{
      font-size:1.3rem;
      color:#2c2c2c;
      font-weight:500;
      display:flex;
      align-items:center;
      margin:20px;
  }
  #card #team .heading i{
      background-color: #507bfc;
      box-shadow:2px 5px 30px rgba(80,123,252,0.4);
      color:#ffffff;
      width:40px;
      height:40px;
      display:flex;
      justify-content:center;
      align-items: center;
      font-size:0.9rem;
      margin:0px 20px;
  }
  #card #team .container .box{
      width:150px;
      height:200px;
      /* background: radial-gradient(circle, rgb(240, 243, 79), rgb(160, 244, 103), rgb(221, 233, 221)); */
      background: white;
      box-shadow: 2px 2px 30px rgba(0,0,0,0.05);
      display:flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding:20px;
      border-radius:10px;
      margin:20px;
      position: relative;
  }
  #card #team .container .box1{
      width:150px;
      height:200px;
      background: radial-gradient(circle, rgb(240, 243, 79), rgb(160, 244, 103), rgb(221, 233, 221));
      box-shadow: 2px 2px 30px rgba(0,0,0,0.05);
      display:flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding:20px;
      border-radius:10px;
      margin:20px;
      position: relative;
  }
  #card #team .container{
      display:flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
  }
  #card #team .container .top-bar{
      width:50%;
      height:4px;
      position:absolute;
      left:50%;
      top:0px;
      transform:translateX(-50%);
      background-color: #507bfc;
      border-radius: 0px 0px 10px 10px;
  }
  #card #team .container .box .nav{
      display:flex;
      justify-content:space-between;
      align-items:center;
      width:100%;
  }
  #card #team .container .box1 .nav{
      display:flex;
      justify-content:space-between;
      align-items:center;
      width:100%;
  }
  #card #team .container .box .nav .verify{
      color:#17b667;
  }
  #card #team .container .box1 .nav .verify{
      color:#17b667;
  }
  #card #team .container .box .nav .heart{
      color:rgba(155,155,155);
  }
  #card #team .container .box1 .nav .heart{
      color:rgba(155,155,155);
  }
  #card #team .container .box .nav .heart:before{
      content:'\f004';
      font-family:fontAwesome;
      line-height:30px;
  }

  #card #team .container .box1 .nav .heart:before{
      content:'\f004';
      font-family:fontAwesome;
      line-height:30px;
  }
  #card #team .container .box .details{
      display:flex;
      justify-content: center;
      align-items: center;
      flex-direction:column;
  }
  #card #team .container .box1 .details{
      display:flex;
      justify-content: center;
      align-items: center;
      flex-direction:column;
  }
  #card #team .container .box .details img{
      top: 20px;
      width:100px;
      height:100px;
      position: absolute;
      border-radius:50%;
      /* overflow:hidden; */
      object-fit:cover;
      object-position: center;
  }
  #card #team .container .box1 .details img{
      top: 20px;
      width:100px;
      height:100px;
      position: absolute;
      border-radius:50%;
      /* overflow:hidden; */
      object-fit:cover;
      object-position: center;
  }
  #card #team .container .box .details strong{
    position: relative;
      font-weight: 500;
      color:#141414;
      letter-spacing:1px;
      top:60px;

  }

  #card #team .container .box1 .details strong{
    position: relative;
      font-weight: 500;
      color:#141414;
      letter-spacing:1px;
      top:60px;

  }
  #card #team .container .box .details p{
    position: relative;
      font-size:0.8rem;
      color:#7a7a7a;
      top: 60px;
  }
  #card #team .container .box1 .details p{
    position: relative;
      font-size:0.8rem;
      color:#7a7a7a;
      top: 60px;
  }
  #card #team .container .box .btn{
      width:100%;
      display:flex;
      justify-content:space-between;
      align-items:center;
  }
  #card #team .container .box1 .btn{
      width:100%;
      display:flex;
      justify-content:space-between;
      align-items:center;
  }
  #card #team .container .box .btn a{
      color:#8b8b8b;
      padding:8px 22px;
      border-radius:20px;
      font-size:0.9rem;
  }
  #card #team .container .box1 .btn a{
      color:#8b8b8b;
      padding:8px 22px;
      border-radius:20px;
      font-size:0.9rem;
  }
  #card #team .container .box .btn a i{
      margin-right: -10px;
  }
  #card #team .container .box1 .btn a i{
      margin-right: -10px;
  }
  #card #team .container .box .btn a:hover{
      color:#fff;
      background-color: #507bfc;
      box-shadow:2px 5px 15px rgba(80,123,252,0.5);
      transition:all ease 0.3s;
  }
  #card #team .container .box1 .btn a:hover{
      color:#fff;
      background-color: #507bfc;
      box-shadow:2px 5px 15px rgba(80,123,252,0.5);
      transition:all ease 0.3s;
  }
  #card #team .container .box:hover{
      box-shadow: 2px 2px 30px rgba(4,15,49,0.1);
      transform:scale(1.01);
      transition:all ease 0.1s;
  }
  #card #team .container .box1:hover{
      box-shadow: 2px 2px 30px rgba(4,15,49,0.1);
      transform:scale(1.01);
      transition:all ease 0.1s;
  }
 .page-icon{
  position: absolute;
  top: 500px;
 }
 .outer_div{
	max-height:990%;
	overflow-y:auto;
	text-align:center;
}
</style>
